<template>
   <div class="app-container">
     <el-row :gutter="20">
       <el-col :span="6" :xs="24">
          <treeComp @changeNode= "changeNode" ></treeComp>
       </el-col>
       <el-col :span="18" :xs="24">
          <tableComp :props="currentNode"></tableComp>
       </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
export default {
  name: 'formDesign'
};
</script>

<script setup lang="ts">
    /***基础组件引入***/
    import { reactive, ref, watchEffect, onMounted, getCurrentInstance, toRefs } from 'vue'
    import { ElTree, ElMessage } from 'element-plus';
    import { Document, Folder, Plus, Edit, Delete } from '@element-plus/icons-vue';

    /****子组件引入****/
    import treeComp from './tree.vue';
    import tableComp from './table.vue';
   

   // const deptTreeRef = ref(ElTree); 
    const state = reactive({
      currentNode: null
    });
    const {
      currentNode
    } = toRefs(state);

    function changeNode(node){
       alert(4);
       state.currentNode= node;
    }
   
  
</script>

<style></style>